<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>选项卡</title>
	<style type="text/css">
        #div1 input{
       	   background:#fff;
        }
        #div1 .active{
        	background:pink;
        }
        #div1 div{
        	width:200px;height:200px;background:#ccc;display: none;
        }

	</style>

	<script type="text/javascript">

        window.onload = function(){
        	var oDiv = document.getElementById('div1');
        	var aBtn = oDiv.getElementsByTagName('input');
            var aDiv =oDiv.getElementsByTagName('div');

            for(var i=0;i<aBtn.length;i++){
            	aBtn[i].index = i;
            	aBtn[i].onclick = function(){
            		for(var i=0;i<aBtn.length;i++){
                        aBtn[i].className = '';
                        aDiv[i].style.display = 'none';
            		}

            		this.className = 'active';
            		aDiv[this.index].style.display = 'block';
            	}
            }

        }



	</script>
</head>
<body>
    <div id="div1">
	    <input type="button" id="btn1" value="aaa" class="active">
		<input type="button" id="btn1" value="bbb">
	    <input type="button" id="btn1" value="ccc">

	    <div style="display:block;">aaaa</div>
	    <div>bbbb</div>
	    <div>cccc</div>
    </div>
</body>
</html>